<template>
  <div id="app">
    <Tou></Tou>
    <div class="menu">
      <div class="menu_1">
        <span class="menu_2">购物车</span>
        <span class="menu_3"></span>
        <span class="menu_4"></span>
      </div>
    </div>
    <table class="table_">
      <tr class="table_2">
        <th>
          <input
            type="checkbox"
            style="font-size: 100px"
            v-model="selectAll"
            @click="all_check()"
          />全选
        </th>
        <th>图片</th>
        <th>名称</th>
        <th>单价(元)</th>
        <th>数量</th>
        <th>小计</th>
        <th>操作</th>
      </tr>

      <tr style="height: 20px">
        <hr style="border: none" />
      </tr>

      <tr class="table_3" v-for="(gs, index) in gwces" :key="gs.gid">
        <td>
          <input
            type="checkbox"
            v-bind:value="gs.gid"
            name="ic"
            @click="single_check()"
          />
        </td>
        <td style="width: 150px">
          <img :src="getAssetsFile(gs.gimg)" style="width: 100px" />
        </td>
        <td>
          {{ gs.gname }}
          <p>颜色:彩色</p>
          <p>尺码:均码</p>
        </td>
        <td style="color: #a01f23; font-weight: bolder">￥{{ gs.gprice }}</td>
        <td>
          <el-input-number
            v-model="gs.gnum"
            :min="1"
            label="数量"
          ></el-input-number>
        </td>
        <td style="color: #ee4727; font-weight: bolder">
          ￥{{ gs.gprice * gs.gnum }}
        </td>
        <td>
          <a href="javascript:void(0)" @click="del(gs, index)"
            ><el-icon><CloseBold /></el-icon
          ></a>
        </td>
      </tr>
    </table>
    <div class="table_4">
      <div class="table_3_1">
        <a href="./index.html">继续购物</a>
      </div>
      <div class="table_3_2">
        承诺：赠送游戏道具 / 7天无理由退换货 / 100%官方正品
      </div>
    </div>
    <div class="table_5">
      <div class="table_5_1">
        <span>商品总金额：￥{{ priceNum }}</span>
        <div class="table_5_1_2">
          <input type="hidden" v-model="dd.dd_hao" />
          <button
            @click="url()"
            style="color: #fff; background: #a01f23; border: none"
          >
            去结算
          </button>
        </div>
      </div>
    </div>

    <div style="background: #fff">
      <Like></Like>
      <Wei></Wei>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { getAssetsFile } from "../assets/img";
import { useRoute, useRouter } from "vue-router";
import axios from "axios";
import "../assets/css/bootstrap.css";
import Tou from "../views/tou.vue";
import Wei from "../views/wei.vue";
import Like from "../views/gwc_like.vue";

const router = useRouter();
const route = useRoute();
const mail: any = ref({});
const g = ref({});
const gwc: any = ref([]);
const gwces: any = ref([]);
const dd: any = ref({});
let fs: any = 0;
let priceNum = 0;
const selectedItems = ref([]); // 已选择的商品列表
let totalPrice = 0; // 总计价格
const selectAll = ref(false); // 全选按钮的状态
/**用户*/
mail.value.qq = route.params.qq;
const Mail = () => {
  axios.get("http://127.0.0.1:1234/U/" + mail.value.qq).then((response) => {
    mail.value = response.data;
  });
};
Mail();

/**购物车*/
const StuN = () => {
  axios.post("http://127.0.0.1:1234/G/spper", g.value).then((response) => {
    gwc.value = response.data;
    gwces.value = gwc.value.filter((f) => f.gqq == mail.value.qq);
  });
};
StuN();
/**删除*/
const del = (gs, index) => {
  axios
    .delete(`http://127.0.0.1:1234/G/${gs.gid}`)
    .then((response) => {
      if (response.data === 1) {
        gwces.value.splice(index, 1); // 从数组中删除元素
      }
    })
    .catch((err) => {
      alert(err);
    });
};
/**随机数*/
const characters =
  "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
const codeLength = 18;
for (var i = 0; i < codeLength; i++) {
  const randomIndex = Math.floor(Math.random() * characters.length);
  fs += characters.charAt(randomIndex);
}
dd.value.dd_hao = fs;
console.log(dd.value.dd_hao);

/**添加订单号*/
const url = () => {
  axios.post(`http://127.0.0.1:1234/Dd`, dd.value).then((response) => {
    if (response.data === 1) {
      localStorage.setItem(
        "myData2",
        window.btoa(window.encodeURIComponent(JSON.stringify(fs)))
      );
      localStorage.setItem(
        "myData1",
        window.btoa(
          window.encodeURIComponent(JSON.stringify(selectedItems.value))
        )
      );
      router.push({ path: `/dingdan/${mail.value.qq}` });
    }
  });
};
/**全选*/
var oInput: any = document.getElementsByName("ic");
const all_check = () => {
  selectedItems.value = []; // 清空已选择的商品列表
  priceNum = 0; // 清空总计价格
  if (selectAll.value) {
    // 取消全选
    for (var i = 0; i < oInput.length; i++) {
      oInput[i].checked = false;
    }
    selectAll.value = false;
  } else {
    // 全选
    for (var i = 0; i < oInput.length; i++) {
      oInput[i].checked = true;
      selectedItems.value.push(gwces.value[i]); // 将当前商品添加到已选择的商品列表
      priceNum += gwces.value[i].gprice * gwces.value[i].gnum; // 更新总计价格
    }
    selectAll.value = true;
  }
};
// 单个选择
const single_check = () => {
  var j = 0;
  selectedItems.value = []; // 清空已选择的商品列表
  priceNum = 0; // 清空总计价格
  for (var i = 0; i < oInput.length; i++) {
    if (oInput[i].checked == true) {
      j = j + 1;
      selectedItems.value.push(gwces.value[i]); // 将当前勾中商品添加到已选择的商品列表
      priceNum += gwces.value[i].gprice * gwces.value[i].gnum; // 更新总计价格
    }
  }
  if (j == oInput.length) {
    selectAll.value = true;
  } else {
    selectAll.value = false;
  }
};
</script>
<style scoped>
@import "../assets/css/TandW.css";
@import "../assets/css/gwc_like.css";
input {
  cursor: pointer;
}
body {
  background: rgb(245, 245, 245);
}
input[type="checkbox"] {
  transform: scale(1.5);
  margin: 5px;
}
.menu {
  background: #f0f0f0;
  height: 60px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.menu_1 {
  width: 1120px;
  margin: 0 auto;
}
.menu span.menu_2 {
  text-align: center;
  line-height: 60px;
  width: 160px;
  background: #a01f23;
  display: block;
  float: left;
  font-size: 18px;
  color: #fff;
  font-weight: bolder;
}
.menu span.menu_3 {
  line-height: 60px;
  height: 60px;
  width: 610px;
  background: url(../assets/image/gwcfk.jpg) 0px 0px no-repeat;
  display: block;
  float: left;
}
.menu span.menu_4 {
  width: 350px;
  height: 60px;
  background: rgb(33, 32, 28);
  display: block;
  float: left;
}
.table_ {
  border-collapse: collapse;
  margin: 0 auto;
  width: 1120px;
}
.table_ tr {
  height: 60px;
  text-align: center;
  background: #fff;
}
.table_ .table_3 {
  height: 170px;
  border-bottom: 5px solid #e7e7e7;
}
.table_3 td p {
  color: #555;
  font-size: 14px;
}
.table_4 {
  display: flex;
  width: 1120px;
  height: 50px;
  line-height: 50px;
  margin-top: 15px;
  margin-bottom: 15px;
}
.table_3_1 a {
  margin-right: 500px;
  color: #a01f23;
  text-decoration: underline;
  border-bottom: 2px solid #a01f23;
}
.table_3_2 {
  font-size: 12px;
  color: #666;
}
.table_5 {
  width: 1120px;
  line-height: 66px;
  height: 66px;
  background: #fff;
  margin-bottom: 66px;
}
.table_5_1 {
  display: flex;
  float: right;
  background: #fff;
}
.table_5_1_2 {
  width: 220px;
  height: 66px;
  list-style: 66px;
  background: #a01f23;
  font-weight: bolder;
  text-align: center;
  font-size: 24px;
}
.table_5_1 span {
  color: #a01f23;
  font-weight: bolder;
  margin-right: 20px;
}
</style>
